<template>
  <div style="display:flex;">
    <Card style="width:100%" :padding="0">
      <div class="card-container">
        <div class="left" :style="{'backgroundColor':bgcolor}">
          <i class="iconfont" v-html="icon"></i>
        </div>
        <div class="right">
          <h1>{{mycount}}</h1>
          <div>{{title}}</div>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
// import {clearInterval} from 'timers';
export default {
  props: ["icon", "bgcolor", "count", "title"],
  data() {
    return {
      mycount: 0
    };
  },
  mounted() {
    var timer = setInterval(() => {
        if(this.mycount < this.count) this.mycount++
        else clearInterval(timer)
    },1);
  }
};
</script>
<style>
.ivu-card-body {
  padding: 0px;
}

.ivu-icon-md-person-add {
  font-size: 36px;
  color: #fff;
}
.card-container {
  display: flex;
  align-items: center;
}

.card-container .left {
  text-align: center;
  width: 36%;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-container .right {
  width: 64%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 110px;
  flex-direction: column;
}

.iconfont {
  color: #fff;
  font-size: 36px;
}
</style>